<template>
  <div>
    <!-- 标准检验项目表单弹窗 -->
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="700px"
      draggable
      align-center
      destroy-on-close
      @close="closeDialog"
    >
      <el-form ref="formRef" :model="formData" label-width="120">
        <el-button
          type="success"
          style="margin-bottom: 10px"
          plain
          @click="handleAdd"
          v-if="!isReadonly"
        >
          <i-ep-plus />
          新增
        </el-button>
        <el-table
          ref="dataTableRef"
          :data="itemList"
          highlight-current-row
          border
          max-height="350px"
          class="sopItemList"
        >
          <el-table-column
            label="备注"
            prop="remark"
            min-width="140"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ $index, row }">
              <el-form-item label-width="0">
                <el-input
                  v-model="row.remark"
                  placeholder="请输入"
                  clearable
                  :max="200"
                />
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column
            label="附件上传"
            prop="attachList"
            min-width="40"
            show-overflow-tooltip
            align="center"
          >
            <template #default="{ $index, row }">
              <div
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-wrap: wrap;
                "
              >
                <CommonUploadFile
                  :files="row.attachList"
                  title=""
                  :showText="false"
                  :multiple="false"
                  :singleImage="true"
                  @update-files="(val) => updateFormFiles(val, row)"
                  folderName="eam/attachList"
                  :isRead="isReadonly"
                />
                <!-- <span v-for="(item, index) in row.images" :key="index">
                  <img
                    :src="`${upPreviewUrl}${item.url}`"
                    style="
                      width: 30px;
                      height: 30px;
                      margin-right: 10px;
                      cursor: pointer;
                    "
                    @click="
                      handlePictureCardPreview(`${upPreviewUrl}${item.url}`)
                    "
                    alt=""
                  />
                </span> -->
              </div>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center"
            v-if="!isReadonly"
          >
            <template #default="{ $index, row }">
              <el-button
                type="primary"
                size="small"
                link
                @click="deleteItem($index)"
              >
                <i-ep-delete />
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="!isReadonly"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
            >确 定
          </el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useDictStoreHook } from "@/store/modules/dictionary";
import _ from "lodash-es";
import { checkCommon } from "@/views/qms/checkHook/checkCommon"; // 引入
import { validateNumberCanNot1 } from "@/utils/commonHooks";
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "ASSETPHOTOS",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible", "change-data"]);
const isBind = ref(false);

const uploadApi = import.meta.env.VITE_APP_BASE_API;
// 预览url前缀
// const upPreviewUrl = `${uploadApi}/system/fileCenter/preview/`;
// const handlePictureCardPreview = (url: string) => {
//   url = url?.replace("fileCenter/download/", "fileCenter/preview/");
//   window.open(url);
// };
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  sopType: {
    type: String,
    default: "",
  },
});
const isReadonly = ref(false);
const itemList = ref([]);
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (newVal === true) {
    }
    setTimeout(() => {
      if (formRef.value) {
        formRef.value.clearValidate();
      }
    }, 50);
  }
);

const rules = reactive({
  projectId: [
    { required: true, message: "请选择项目", trigger: ["blur", "change"] },
  ],
  processId: [
    { required: true, message: "请选择工序", trigger: ["blur", "change"] },
  ],
  checkItemId: [
    {
      required: true,
      message: "请输入项目规范码",
      trigger: ["blur", "change"],
    },
    {
      min: 1,
      max: 50,
      message: "长度在 1 到 50 个字符",
      trigger: ["blur", "change"],
    },
  ],
  checkTypeId: [
    { required: true, message: "请选择检验类型", trigger: ["blur", "change"] },
  ],
  preNum: [
    { required: true, message: "请填写预检单数量", trigger: ["blur"] },
    {
      validator: validateNumberCanNot1,
      trigger: "blur",
    },
  ],
  productId: [
    { required: true, message: "请选择产品", trigger: ["blur", "change"] },
  ],
  planId: [
    { required: true, message: "请选择计划", trigger: ["blur", "change"] },
  ],
  enabled: [],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
});

const { changeOpeType, getEffectTypeCode, effectTypeCodeList } = checkCommon(
  ref(formData)
);

watch(
  () => props.data,
  async (newVal: any) => {
    formData.id = "";
    console.log("props.data", props.data);

    if (newVal?.itemList) {
      Object.assign(formData, newVal);
      itemList.value = newVal.itemList;
    }
    if (newVal) {
      isReadonly.value = newVal.isReadonly;
    }
  }
);

function updateFormFiles(val, row) {
  row.attachList = val;
}
/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  itemList.value = [];
}
function handleAdd() {
  itemList.value.push({ remark: "" });
}
function deleteItem(index) {
  itemList.value.splice(index, 1);
}
const loading = ref(false);

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});

onMounted(() => {
  // getCheckRuleList();
});

/** email消息发送记录保存提交 */
function handleSubmit() {
  emit("change-data", itemList.value);
  emit("change-visible", false, itemList.value);
}
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 120px !important;
}
.p_title {
  font-size: 14px;
  color: #000;
}
:deep(.el-dialog__body) {
  padding: 20px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}
:deep(.sopItemList .el-table__body-wrapper .el-table__cell) {
  padding: 0;
  .el-form-item--default {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 40px;
  height: 40px;
  // margin-right: 10px;
}
:deep(.file_name) {
  display: none;
}

:deep(.el-upload--picture-card) {
  border-radius: 2px;
  --el-upload-picture-card-size: 40px !important;
  i {
    font-size: 20px;
  }
}
:deep(.el-upload-list__item) {
  margin: 0 8px 3px 0 !important;
}
:deep(.el-upload-list__item-actions) {
  i {
    font-size: 16px !important;
    color: #fff;
  }
}
:deep(.el-upload-list--picture-card .el-upload-list__item-actions span + span) {
  margin-left: 5px !important;
}
</style>
